<template>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="item-name">Name</label>
      <input v-model="name" type="text" class="form-control" id="item-name" />
    </div>
    <div class="col-md-3 mb-3">
      <label for="item-price">Price</label>
      <input v-model="price" type="number" class="form-control" id="item-price" />
    </div>
    <div class="col-md-3 mb-3">
      <label for="item-quantity">Quantity</label>
      <input
        :value="props.quantity"
        @input="updateQuantity($event.target.value)"
        type="number"
        class="form-control"
        id="item-quantity"
      />
    </div>
  </div>
</template>

<script setup>
import { defineModel } from 'vue'

// 通过defineModel 宏来定义
const name = defineModel('name')
const price = defineModel('price')

// 通过原生来定义
const props = defineProps(['quantity'])
const emit = defineEmits(['update:quantity'])

const updateQuantity = (value) => {
  emit('update:quantity', value)
}
</script>

<style lang="scss" scoped></style>
